<template>
  <div class="layout-percent-control">
    <div
      class="item"
      :class="{ active: val === item.value }"
      v-for="item in filterOption"
      :key="item.value"
      @click="onClick(item.value)"
    >
      <span class="text" v-for="el in item.children" :key="el">{{ el }}</span>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, computed } from 'vue';

export default defineComponent({
  name: 'LayoutPercentControl',
  props: {
    value: {
      type: String,
      default: '',
    },
    controls: {
      type: Object,
      default: () => ({}),
    },
    controlKey: {
      type: String,
      default: () => '',
    },
    options: {
      type: Object,
      default: () => ({}),
    },
  },
  setup(props, context) {
    const val = computed({
      get: () => props.value,
      set: (val) =>
        context.emit('updateValue', val, props.controlKey, props.controls),
    });
    const layoutType = computed(() => props.controls.layoutType);
    const filterOption = computed(() => {
      const it = props.options.find(
        (it: any) => it.value === layoutType.value.defaultValue,
      );
      return it?.children ?? [];
    });
    const onClick = (key: string) => {
      val.value = key;
    };

    return {
      val,
      filterOption,
      onClick,
    };
  },
});
</script>

<style lang="less" scoped>
.layout-percent-control {
  width: 100%;
  font-size: 12px;
  line-height: 22px;
  border-radius: 4px;
  .item {
    .flexRow();
    position: relative;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid #d4d7e0;
    border-radius: 4px;
    cursor: pointer;
    &:hover {
      border-color: @rb-primary-color;
    }
    &.active {
      border-color: @rb-primary-color;
      &::after {
        content: '√';
        display: block;
        position: absolute;
        right: 0;
        bottom: 0;
        width: 20px;
        font-size: 20px;
        text-align: center;
        color: @rb-text-color-light;
        background-color: @rb-primary-color;
        border-top-left-radius: 16px;
      }
    }
    .text {
      flex: 1 1 0%;
      display: inline-block;
      margin-right: 8px;
      line-height: 24px;
      border-radius: 2px;
      text-align: center;
      background: @rb-border-color-base;
      &:last-child {
        margin-right: 0;
      }
    }
    .rb-icon {
      position: absolute √;
    }
  }
}
</style>
